<DocMatTable></DocMatTable>

<h5 class="mat-h5">Example</h5>
<DemoContainer>
    <Content>
        <MatTable Items="@cars" class="mat-elevation-z5">
            <MatTableHeader>
                <th>Name</th>
                <th>Price</th>
                <th>Horsepower</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Name</td>
                <td>@String.Format("${0:f2}", @context.Price)</td>
                <td>@context.Horsepower</td>
            </MatTableRow>
        </MatTable>

        @code
        {

            public class Car
            {
                public string Name { get; set; }
                public double Price { get; set; }
                public int Horsepower { get; set; }

                public Car(string name, double price, int horsepower)
                {
                    Name = name;
                    Price = price;
                    Horsepower = horsepower;
                }
            }

            Car[] cars = new[]
            {
                new Car("Volkswagen Golf", 10000, 220),
                new Car("Volkswagen Passat", 11000, 240),
                new Car("Volkswagen Polo", 12000, 110),
                new Car("Ford Focus", 13000, 200),
                new Car("Ford Fiesta", 14000, 160),
                new Car("Ford Fusion", 15000, 260),
                new Car("Ford Mondeo", 16000, 120),
            };

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTable Items=""@cars"" class=""mat-elevation-z5"">
            <MatTableHeader>
                <th>Name</th>
                <th>Price</th>
                <th>Horsepower</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Name</td>
                <td>@String.Format(""${0:f2}"", @context.Price)</td>
                <td>@context.Horsepower</td>
            </MatTableRow>
        </MatTable>

        @code
        {

            public class Car
            {
                public string Name { get; set; }
                public double Price { get; set; }
                public int Horsepower { get; set; }

                public Car(string name, double price, int horsepower)
                {
                    Name = name;
                    Price = price;
                    Horsepower = horsepower;
                }
            }

            Car[] cars = new[]
            {
                new Car(""Volkswagen Golf"", 10000, 220),
                new Car(""Volkswagen Passat"", 11000, 240),
                new Car(""Volkswagen Polo"", 12000, 110),
                new Car(""Ford Focus"", 13000, 200),
                new Car(""Ford Fiesta"", 14000, 160),
                new Car(""Ford Fusion"", 15000, 260),
                new Car(""Ford Mondeo"", 16000, 120),
            };

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Filter Example, Pull Data from API, Single Row Selection / Hover</h5>
<DemoContainer>
    <Content>
        <MatTable Items="@todos" LoadInitialData="true" Striped="true" RequestApiOnlyOnce="true"  AllowSelection="true" RowClass="tester"
                  ApiUrl="https://jsonplaceholder.typicode.com/todos" FilterByColumnName="Title" DebounceMilliseconds="150" class="mat-elevation-z5">
            <MatTableHeader>
                <th>Id</th>
                <th>Completed</th>
                <th>Todo</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@String.Format("{0:d}", @context.Id)</td>
                <td>@context.Completed</td>
                <td>@context.Title</td>
            </MatTableRow>
        </MatTable>

        @code
        {

            public class Todo
            {
                public int UserId { get; set; }
                public int Id { get; set; }
                public string Title { get; set; }
                public bool Completed { get; set; }

                public Todo()
                {
                }
            }

            Todo[] todos;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTable Items=""@todos"" LoadInitialData=""true"" Striped=""true"" RequestApiOnlyOnce=""true""  AllowSelection=""true"" RowClass=""tester""
                  ApiUrl=""https://jsonplaceholder.typicode.com/todos"" FilterByColumnName=""Title"" DebounceMilliseconds=""150"" class=""mat-elevation-z5"">
            <MatTableHeader>
                <th>Id</th>
                <th>Completed</th>
                <th>Todo</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@String.Format(""{0:d}"", @context.Id)</td>
                <td>@context.Completed</td>
                <td>@context.Title</td>
            </MatTableRow>
        </MatTable>

        @code
        {

            public class Todo
            {
                public int UserId { get; set; }
                public int Id { get; set; }
                public string Title { get; set; }
                public bool Completed { get; set; }

                public Todo()
                {
                }
            }

            Todo[] todos;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>
